<template>
    <swiper :options="swiperOption" ref="mySwiper" class="slide-box">
    <!-- slides -->
    <swiper-slide v-for="(page,index) in pages" :key="index">
        <div class="icon-item" v-for="item in page" :key="item.id">
            <img :src="item.imgUrl" alt="">
            <p>{{item.desc}}</p>
        </div>
    </swiper-slide>
   
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  name: "icons",
  props: ["iconList"],
  data() {
    return {
      swiperOption: {},
    };
  },
    computed: {
        pages() {
          if(!this.iconList){
            return
          }
            const pages = []
            this.iconList.forEach((item,index)=>{
                const page = Math.floor(index / 8)
                if(!pages[page]){
                    pages[page]=[]
                }
                pages[page].push(item)
            })
            return pages
        }
    }
};
</script>

<style scoped>
.slide-box {
  width: 100%;
  height: 3.8rem;
  background-color: #fff;
}
.swiper-wrapper {
  width: 100%;
  height: 100%;
}
.icon-item {
  float: left;
  width: 25%;
  height: 50%;
  text-align: center;
}
.icon-item img {
  display: block;
  margin: 0.2rem auto;
  width: 1rem;
}
</style>
